# HTML5: Hoja de Referencia

### Contenido:

- [Anatomía de un elemento HTML](#anatomia-de-un-elemento-html)
- [Elementos anidados](#elementos-anidados)
- [Elementos vacios](#elementos-vacios)
- [Anatomia de un elemento HTML](#anatomia-de-un-elemento-html)
- [Referencia](#referencia)
  - [Metadatos del documento](#metadatos-del-documento)
    - [<base>](#base)
    - [<head>](#head)
    - [<link>](#link)
    - [<meta>](#meta)
    - [<style>](#style)
    - [<title>](#title)
  - [Raiz de las secciones](#raiz-de-las-secciones)
    - [<body>](#body)
  - [Secciones del contenido](#secciones-del-contenido)
  - [Contenido del texto](#contenido-del-texto)
  - [Semantica del texto en linea](#semantica-del-texto-en-linea)
  - [Im'agenes y multimedia](#imagenes-y-multimedia)
  - [Contenido incrustado](#contenido-incrustado)
  - [Scripting](#scripting)
  - [Demarcar lo editado](#demarcar-lo-editado)
  - [Tablas de contenido](#tablas-de-contenido)
  - [Elementos de formulario](#elementos-de-formulario)
  - [Elementos interactivos](#elementos-interactivos)
  - [Componentes web](#componentes-web)
  - [Elementos desaprobados y obsoletos](#elementos-desaprobados-y-obsoletos)

HTML (HyperText Markup Language) o "Lenguage de Marcado de Hípertexto" en español es el bloque de construcción más básico de la Web. Define el significado y la estructura del contenido web.

"Hípertexto" se refiere a enlaces que conectan las páginas web con alguna otra, ya sea dentro un sitio web simple oentre sitios. Los enlaces son un aspecto fundamental de la Web.

HTML utiliza "marcas" para anotar el texto, imágenes, y otro contenido para mostrar en un navegador Web. El marcado HTML incluye elementos "especiales" como [<head>](#head), [<title>](#title), [<body>](#body), [<header>](#header), [<footer>](#footer), [<article>](#article), [<section>](#section), [<p>](#p), [<div>](#div), [<span>](#span), [<img>](#img), [<aside>](#aside), [<audio>](#audio), [<canvas>](#canvas), [<datalist>](#datalist), [<details>](#details), [<embed>](#embed), [<nav>](#nav), [<output>](#output), [<progress>](#progress), [<video>](#video) y muchos otros.

Un elemento HTML se separa de otro texto en un documento por "etiquetas" (tags), las cuales consisten en el nombre del elemento rodeado por "<" y ">". El nombre de un elemento dentro de una etiqueta no distingue entre mayúsculas y minúsculas. Es decir, se puede escribir en mayúsculas, minúsculas, o una mescla. Por ejemplo, el elemento `<title>` puede escribirse como `<Title>`, `<TITLE>`, o de cualquier otra manera.

## Anatomía de un elemento HTML

Ejemplo de un elemento HTML:

```html
<p>Mi gato es muy gruñon</p>
```

Las partes principales del elemento son:

1. **Etiqueta de apertura**: Consiste en el nombre del elemento (en este caso "p", el parrafo), envuelto en parentesis angulares, uno de apertura `<` y otro de clausura `>`. Esto señala donde comienza un elemento, es decir, a partir de donde comienza a tener efecto - en este caso, la etiqueta `<p>` se'nala donde comienza el parrafo.
2. **Etiqueta de clausura**: Es la misma que la etiqueta de apertura, excepto que incluye una barra inclinada `/` antes del nombre del elemento. Esto se'nala donde termina el elemento (donde deja de tener efecto). Si se olvida poner la etiqueta de clausura los resultados son inesperados; esto es un error muy com'un en principiantes.
3. **Contenido**: Esto es el contenido del elemento, el cual en este caso es simplemente el texto *"Mi gato es muy gruñon"*
4. **El Elemento**: La etiqueta de apertura, la etiqueta de clausura y el contenido conforman el elemento HTML.

Los elementos HTML tambi'en pueden tener atributos, estos son por ejemplo:

```html
<p class="editor-note">Mi gato es muy gruñon</p>
```

Los atributos contienen informaci'on acerca del elemento que no se desea que aparezca en el contenido. En el ejemplo, `class` es el *nombre* del atributo, y `editor-note` es el valor del atributo. El atributo `class` te permite dar al elemento un identificador que puede ser utilizado para acceder despues a el para modificar su estilo, o el contenido.

Un atributo siempre deber'ia tener lo siguiente:
1. Un espacio entre el atributo y el nombre del elemento (o entre un atributo previo, si es que tiene m'as atributos).
2. El nombre del atributo, seguido de un signo de igual `=`.
3. Un valor del atributo, encerrado entre comillas dobles `""`.

> **Nota**: Los valores de los atributos simples que no contienen espacios ASCII (o algunos de los caracteres `"` `'` ``` `=` `<` `>`) pueden permanecer sin comillas, pero se recomienda encerrar entre comillas todos los valores de los atributos, ya que hace el codigo mas consistente y comprensible.

## Elementos anidados

Se pueden colocar elementos dentro de otros elementos - esto se llama **anidar**. Si quisieramos se'nalar que nuestro gato es **muy** gru'non, podriamos encerrar la palabra "muy" en un elemento `[<strong>](#strong)`, lo cual significa que la palabra se enfatiza fuerte con negritas.

```html
<p>Mi gato es <strong>muy</strong> gruñon</p>
```

De cualquier forma, se debe tener cuidado en la forma de anidar los elementos. En el ejemplo anterior, se abre con el elemento `<p>`, despues se abre un nuevo elemento `<strong>`; por lo tanto, debemos cerrar primero el elemento mas interno con `</strong>` y despues el mas externo con `</p>`. El ejemplo siguiente es incorrecto:

```html
<p>Mi gato es <strong>muy gruñon</p></strong>
```

Los elementos deben abrirse y cerrarse correctamente de tal forma que est'en claramente uno dentro del otro. Si los elementos se solapan, como en el ejemplo anterior, el navegador intentara asumir lo mejor de lo que se le quiso decir. As'i que no lo hagas!

## Elementos vacios

Algunos elementos HTML no tienen contenido, estos se llaman **elementos vac'ios**. Por ejemplo el elemento `<img>`:

```html
<img src="imagenes/foto.jpeg" alt="Foto de mi novia">
```

Este elemento contiene dos atributos `src` y `alt`, pero no tiene la etiqueta `</img>` por lo tanto no tiene contenido. Esto significa que el elemento no tiene contenido para envolver o afectar. Su proposito no es ese, sino incrustar una im'agen en el documento d'onde la etiqueta aparece.

## Anatomia de un elemento HTML


